<template>
  <div class="hometop" ref="ime">
    <img
      :src="homeback"
      alt=""
      width="100%"
    />
    <div class="beksx">
      <transition name="fade">
        <div v-show="flag" class="hometoparea">
          <div class="hometopitem">
            <div>
              <div class="photo">
                <img src="@/assets/img/tx.jpg" alt="" />
              </div>
              <p class="inopin">好看的效果，公司摸鱼写~ (*^▽^*)</p>
            </div>

            <div>
              <div class="choice-QRcode">
                <div
                  class="choice-control"
                  v-for="(ine, index) in QRcode"
                  :key="(ine, index)"
                  @click="choiceQRcode(ine)"
                >
                  {{ ine.name }}
                </div>
              </div>
              <div class="ewmarea">
                <img :src="ewmurl" alt="" width="100%" :style="transformD" />
              </div>
            </div>

            <div class="copyright">
              入江辞圣 <span class="iconfont icon-banquan"></span> songci
            </div>
          </div>
          <div class="bottomarea">
            <div class="boicon" @click="handleScroll"></div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: false,
      ewmurl: require("@/assets/img/rjcsvxewm.jpg"),
      homeback : 'https://rujina-1307140134.cos.ap-shanghai.myqcloud.com/img/home/background_01.jpg',
      // ewmurl: "https://rujina-1307140134.cos.ap-shanghai.myqcloud.com/img/rjcsvxewm.jpg",
      QRcode: [
        {
          name: "微信二维码",
          imageurl: require("@/assets/img/rjcsvxewm.jpg"),
        },
        {
          name: "QQ二维码",
          imageurl: require("@/assets/img/rjcsqqewm.jpg"),
        },
      ],
      transformD: "transform:rotateY(0deg);",
    };
  },
  methods: {
    handleScroll() {
      // 点击下滑
      let int = setInterval(() => {
        if (document.documentElement.scrollTop > this.$refs.ime.offsetHeight) {
          clearInterval(int);
        } else {
          document.documentElement.scrollTop += 10;
        }
      }, 1);
    },
    imeofg() {
      if(this.$refs.ime.offsetWidth <= 750){
        this.homeback =  'https://rujina-1307140134.cos.ap-shanghai.myqcloud.com/img/home/backgtound_02.jpg'
      }
      setTimeout(() => {
        this.flag = true
      }, 1000);
    },
    choiceQRcode(data) {
      // 二维码旋转以及切换
      if (this.transformD == "transform: rotateY(180deg);") {
        setTimeout(() => {
          this.transformD = "transform: rotateY(0deg);";
          this.ewmurl = data.imageurl;
        }, 100);
      } else {
        setTimeout(() => {
          this.transformD = "transform: rotateY(180deg);";
          this.ewmurl = data.imageurl;
        }, 100);
      }
    },
  },
  mounted() {
    this.imeofg();
  },
};
</script>

<style lang="less" scope>
.hometop {
  width: 100%;
  overflow: hidden;
  position: relative;
  .beksx {
    position: absolute;
    top: 0px;
    width: 100%;
    translate: 1s;
    height: 100%;
    background-image: linear-gradient(rgba(230, 100, 100, 0.315), #9198e5bb);
    transition: 1s;
    .hometoparea {
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      .hometopitem {
        width: 100%;
        height: 10rem;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        margin-top: 1rem;
        .photo {
          width: 2.5rem;
          height: 2.5rem;
          border-radius: 50%;
          overflow: hidden;
          margin: 0 auto;
          transition: 1s;
          border: 0.1rem solid #9198e5bb;
          img {
            width: 100%;
            border-radius: 50%;
          }
        }
        .photo:hover {
          transform: rotate(360deg);
          border: 0.1rem solid pink;
        }
        .inopin {
          width: 5rem;
          text-align: center;
          margin: 0 auto;
          margin-top: 0.4rem;
          border-top: 1px solid #eee;
          font-size: 00.3rem;
          text-align: center;
          padding: 0.2rem;
          color: #fff;
        }
        .choice-QRcode {
          width: 6rem;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;
          .choice-control {
            width: 2.6rem;
            height: 0.6rem;
            font-size: 00.3rem;
            background: none;
            border: none;
            outline: none;
            border-radius: 0.3rem;
            border: 1px solid #fff;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: 1s;
          }
          .choice-control:hover {
            background-color: #e6e6e6bb;
          }
        }
        .ewmarea {
          width: 3rem;
          margin: 0 auto;
          margin-top: 0.2rem;
          overflow: hidden;
          img {
            transition: 1s;
          }
        }
        .copyright {
          width: 100%;
          text-align: center;
          font-size: 00.2rem;
          color: #fff;
          margin-top: 00.4rem;
        }
      }
      .bottomarea {
        transition: 1s;
        margin: 0 auto;
        .boicon {
          width: 0;
          height: 0;
          border-left: 0.8rem solid transparent;
          border-right: 0.8rem solid transparent;
          border-top: 0.8rem solid rgb(255, 255, 255);
          margin: 0 auto;
          animation-name: Navigation;
          animation-duration: 3s;
          animation-iteration-count: infinite;
        }
      }
    }
  }
}
.fade-enter {
  opacity: 0;
}
.fade-enter-to {
  opacity: 1;
}
.fade-leave {
  opacity: 1;
}
.fade-leave-to {
  opacity: 0;
}
.fade-enter-active {
  transition: all 0.8s ease;
}
.fade-leave-active {
  transition: all 0.8s ease;
}
@keyframes Navigation {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>